<template>
  <div class="my-more">
    <div class="title">全部的 "{{type1.typeName}}{{type2?'/'+type2.typeName:''}}" 视频都在这了</div>
    <div class="main">
      <div class="tip" v-if="list.length<=0">
       抱歉！ 暂时没有相关视频哦！
      </div>
      <video-card v-for="(item,index) in list" :key="index" :video="item"></video-card>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalRow"
        prev-text="上一页"
        next-text="下一页"
        :current-page.sync="pageNumber"
        :page-size="pageSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-more",
  data: function() {
    return {
      type1Id:null,
      type2Id:null,
      type1:{},
      type2:null,
      pageNumber:1,
      pageSize:24,
      list:[],
      totalRow:0
    };
  },
  methods: {
    getType(){
      this.axios.post('videoType/getType1ById',{
        id:this.type1Id
      }).then(res=>{
        this.type1=res.data.type1;
      })
      if(this.type2Id)
      this.axios.post('videoType/getType2ById',{
        id:this.type2Id
      }).then(res=>{
        this.type2=res.data.type2;
      })

    },
    getVideoList(){
      this.axios.post('video/getVideoList',{
        type1Id:this.type1Id,
        type2Id:this.type2Id,
        pageNumber:this.pageNumber,
        pageSize:this.pageSize
      }).then(res=>{
        this.list= res.data.page.list
        this.totalRow = res.data.page.totalRow
      })
    }
  },
  created(){
    this.type1Id=this.$route.query.type1Id
    this.type2Id=this.$route.query.type2Id
  },
  mounted(){
    window.scrollTo(0,0)
    this.getType();
    this.getVideoList();
  },
  watch:{
    pageNumber:function(){
      this.getVideoList();
    }
  }
};
</script>

<style lang="scss" scoped>
.title{
    background-color: #f5f5f5;
    height: 38px;
    line-height: 38px;
    color:#606266;
    padding-left: 20px;
    border-radius: 10px;
}

.main {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  .video-card {
    margin: 0 29px 25px 0px;
    &:nth-child(6n) {
      margin-right: 0;
    }
  }
}
.pagination {
  text-align: center;
  margin: 30px auto;
}
.tip{
  color: #868383;
  text-align: center;
  margin: 50px auto;
  widows: 200px;
  font-size: 24px;
  font-weight: bold;
}
</style>